<template>
  <div class="home-page container-md">
    <section class="text-center container">
      <div class="row py-lg-5">
        <div class="col-lg-6 col-md-8 mx-auto">
          <img class="w-50" src="../assets/callout.5b86dfc8.svg" alt="" />
          <h2 class="font-weight-light">随心写作，自由表达</h2>
          <p>
            <router-link :to="{ name: 'Article' }" class="btn btn-primary my-2"
              >开始写文章</router-link
            >
          </p>
        </div>
      </div>
    </section>
    <h4 v-if="columns.length" class="font-weight-bold  text-center mb-4">
      发现精彩
    </h4>
    <column-list :list="columns" />
    <!-- {{ currentPage }}
    {{ pageSize }}
    {{ count }} -->
    <button
      @click="loadMore"
      v-if="hasMore"
      class="btn btn-outline-primary mt-2 mb-5 mx-auto btn-block w-25"
    >
      加载更多
    </button>
  </div>
</template>
<script>
import { onMounted, computed, toRefs, reactive } from 'vue';
import { getColumns } from '@/api/column';
import ColumnList from '@/components/ColumnList.vue';
export default {
  name: 'Home',
  components: {
    ColumnList,
  },
  setup() {
    const state = reactive({
      columns: [],
      count: 0,
      currentPage: 1,
      pageSize: 5,
    });

    const getColumnsData = async () => {
      const currentPage = state.currentPage;
      const pageSize = state.pageSize;
      const res = await getColumns({ currentPage, pageSize });
      // state.columns = res.list;
      state.columns = state.columns.concat(res.list);
      state.currentPage = res.currentPage;
      state.count = res.count;
    };

    const hasMore = computed(() => {
      if (state.currentPage * state.pageSize < state.count) return true;
      return false;
    });

    const loadMore = () => {
      state.currentPage++;
      getColumnsData();
    };

    onMounted(() => {
      getColumnsData();
    });

    return {
      hasMore,
      loadMore,
      ...toRefs(state),
    };
  },
};
</script>
